<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:shiro="http://www.w3.org/1999/xhtml">
<head th:include="common/Head :: headCss">

</head>
<div>
    <link rel="stylesheet" href="../bootstrap/js/dept/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/js/dept/css/jquery.treegrid.css">
    <link rel="stylesheet" href="../ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../ztree/css/metroStyle/metroStyle.css">
</div>
<body>
<div id="wrapper">
    <nav th:include="common/Left_Ment :: left"></nav>
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div th:include="common/Head :: head"></div>
        <div v-show="showList">
            <div class="grid-btn">
                <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
                <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
                <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                <a class="btn btn-success" @click="del"><i class="fa fa-plus-square"></i>&nbsp;上架</a>
                <a class="btn btn-success" @click="del"><i class="fa fa-minus-square"></i>&nbsp;下架</a>
            </div>

            <table class="dataTables-example" id="deptTable" data-mobile-responsive="true"
                   data-click-to-select="true"
            >
                <thead>
                <tr>
                    <th data-field="selectItem" data-checkbox="true"></th>
                </tr>
                </thead>
            </table>
        </div>
        <div v-show="!showList" class="panel panel-default">
            <div class="panel-heading">{{title}}</div>
            <form class="form-horizontal" id="myForm">
                <div class="form-group">
                    <div class="col-sm-2 control-label">登录账号</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="User.userAccount" name="userAccount"
                               id="userAccount"
                               placeholder="登录账号"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">用户名</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="User.userName" name="username"
                               placeholder="用户名"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">输入新密码</div>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="password" name="password"
                               v-model="User.userPassword" placeholder="输入新密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">再次输入新密码</div>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" name="passwordAgin" id="passwordAgin"
                               placeholder="再次输入新密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">邮箱</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="User.email" name="email" placeholder="邮箱"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">手机</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="User.phone" name="phone" placeholder="手机"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">角色</div>
                    <div class="col-sm-10">
                        <input type="hidden" class="form-control" style="cursor:pointer;" v-model="User.roleId"
                               @click="deptTree" readonly="readonly"/>
                        <input type="text" class="form-control" style="cursor:pointer;" v-model="User.roleName"
                               @click="roleTree" readonly="readonly" placeholder="全部角色"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">部门</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" style="cursor:pointer;" v-model="User.departmentName"
                               @click="deptTree" readonly="readonly" placeholder="一级部门"/>
                        <input type="hidden" class="form-control" style="cursor:pointer;" v-model="User.departmentId"
                               @click="deptTree" readonly="readonly"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">排序号</div>
                    <div class="col-sm-10">
                        <input type="number" class="form-control" v-model="User.orderNum" placeholder="排序号"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label"></div>
                    <input type="button" name="submit" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                    &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
                </div>
            </form>
        </div>
    </div>
    <!-- 选择角色 -->
    <div id="roleLayer" style="display: none;padding:10px;">
        <div class="wrapper">
            <div class="treeShowHideButton" onclick="search();">
                <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
                <label id="btnHide" title="隐藏搜索">︽</label>
            </div>
            <div class="treeSearchInput" id="search">
                <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
                <button class="btn" id="btn" onclick="searchNode()"> 搜索</button>
            </div>
            <div class="treeExpandCollapse">
                <a href="javascript:" id="btnExpand">展开</a> /
                <a href="javascript:" id="btnCollapse">折叠</a>
            </div>
            <div id="roleTree" class="ztree"></div>
        </div>
    </div>

    <!-- 选择部门 -->

    <div id="deptLayer" style="display: none;padding:10px;">
        <div class="wrapper">
            <div class="treeShowHideButton" onclick="search();">
                <label id="btnShowDept" title="显示搜索" style="display:none;">︾</label>
                <label id="btnHideDept" title="隐藏搜索">︽</label>
            </div>
            <div class="treeSearchInput" id="search1">
                <label for="keyword">关键字：</label><input type="text" class="empty" id="keywordDept" maxlength="50">
                <button class="btn" id="btnDept" onclick="searchDeptNode()"> 搜索</button>
            </div>
            <div class="treeExpandCollapse">
                <a href="javascript:" id="btnExpandDept">展开</a> /
                <a href="javascript:" id="btnCollapseDept">折叠</a>
            </div>
            <div id="deptTree" class="ztree"></div>
        </div>
    </div>


</div>

<div th:include="common/Head :: js"></div>

<script src="../ztree/jquery.ztree.all.min.js"></script>
<script src="../ztree/jquery.ztree.exhide.js"></script>
<script src="../bootstrap/js/dept/js/bootstrapValidator.js"></script>

<script src="../bootstrap/js/dept/js/jquery.treegrid.min.js"></script>
<script src="../bootstrap/js/dept/js/jquery.treegrid.bootstrap3.js"></script>
<script src="../bootstrap/js/dept/js/jquery.treegrid.extension.js"></script>
<script src="../bootstrap/js/project/sys/shop/js/tree.table.js"></script>

<script src="../bootstrap/js/dept/js/vue.min.js"></script>
<script src="../bootstrap/js/project/sys/shop/js/shop.js"></script>
<script src="../bootstrap/js/project/sys/shop/js/shopztree.js"></script>



<script>

    $(function () {


    });


    //dept

    var lastValueDept = "", nodeListDept = [], keyDept = $("#keywordDept");
    keyDept.bind("focus", focusKey).bind("blur", blurKey).bind("change cut input propertychange", searchNodeDept);
    keyDept.bind("keydown", function (e) {
        if (e.which == 13) {
            searchNodeDept();
        }
    });

    function focusKey(e) {
        if (keyDept.hasClass("empty")) {
            keyDept.removeClass("empty");
        }
    }

    function blurKey(e) {
        if (keyDept.get(0).value === "") {
            keyDept.addClass("empty");
        }
        searchNodeDept(e);
    }

    function searchNodeDept() {

        var value = $.trim(keyDept.get(0).value);

        var keyType = "name";


        if (lastValueDept === value) {


            return;

        }
        lastValueDept = value;


        var nodes = Deptztree.getNodes();

        if (value == "") {

            showAllNode(nodes);
            return;
        }
        hideAllNode(nodes);


        nodeListDept = Deptztree.getNodesByParamFuzzy(keyType, value);


        updateNodes(nodeListDept);
    }


    function hideAllNode(nodes) {
        //var ztree = $.fn.zTree.getZTreeObj("deptTree");
        nodes = Deptztree.transformToArray(nodes);
        for (var i = nodes.length - 1; i >= 0; i--) {
            Deptztree.hideNode(nodes[i]);
        }
    }

    function showAllNode(nodes) {

        nodes = Deptztree.transformToArray(nodes);
        for (var i = nodes.length - 1; i >= 0; i--) {
            if (nodes[i].getParentNode() != null) {
                Deptztree.expandNode(nodes[i], false, false, false, false);
            } else {
                Deptztree.expandNode(nodes[i], true, true, false, false);
            }
            Deptztree.showNode(nodes[i]);
            showAllNode(nodes[i].children);
        }
    }

    function updateNodes(nodeList) {

        Deptztree.showNodes(nodeList);
        for (var i = 0, l = nodeList.length; i < l; i++) {
            var treeNode = nodeList[i];
            showChildren(treeNode);
            showParent(treeNode)
        }
    }

    function showChildren(treeNode) {

        if (treeNode.isParent) {
            for (var idx in treeNode.children) {
                var node = treeNode.children[idx];
                Deptztree.showNode(node);
                showChildren(node);
            }
        }
    }

    function showParent(treeNode) {

        var parentNode;
        while ((parentNode = treeNode.getParentNode()) != null) {
            Deptztree.showNode(parentNode);
            Deptztree.expandNode(parentNode, true, false, false);
            treeNode = parentNode;
        }
    }

    function searchDeptNode($this) {
        $('#searchDept').slideToggle(200);
        $('#btnShowDept').toggle();
        $('#btnHideDept').toggle();
        $('#keywordDept').focus();
    }

    $(function () {


        $("#systemManage").attr("class", "active");
        $("#systemManage_ul").attr("class", "nav nav-second-level collapse in");

        $("#userManage").attr("class", "active");


        $('#btnExpandDept').click(function () {
            Deptztree.expandAll(true);
        });
        $('#btnCollapseDept').click(function () {
            Deptztree.expandAll(false);
        });


        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userAccount: {
                    message: '登录账号验证失败',
                    threshold: 6, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                    validators: {
                        notEmpty: {
                            message: '登录账号不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '登录账号长度必须在6到18位之间'
                        },
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: '/user/checkUserAccount',//验证地址
                            message: '登录账号已存在，请重新输入！',//提示消息
                            delay: 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'POST'//请求方式
                            /**自定义提交数据，默认值提交当前input value
                             *  data: function(validator) {
                               return {
                                   password: $('[name="passwordNameAttributeInYourForm"]').val(),
                                   whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                               };
                            }
                             */
                        }
                    }
                },
                password: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                passwordAgin: {
                    message: '密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '密码长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含大写、小写、数字和下划线'
                        }, callback: {
                            message: '两次密码输入不一致！',
                            callback: function (value, validator, $form) {
                                var password = $("#password").val();

                                if (password == value) {
                                    return true;
                                } else {
                                    return false;
                                }


                            }
                        }
                    }
                },
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '用户名长度必须在6到18位之间'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址格式有误'
                        }
                    }
                },
                phone: {
                    message: '手机号码验证失败',
                    validators: {
                        notEmpty: {
                            message: '手机号码不能为空'
                        },
                        stringLength: {
                            min: 11,
                            max: 11,
                            message: '手机号码必须是11位数'
                        }

                    }
                }
            }
        });

    });
</script>
</body>
</html>